<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="lws-common.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/mqttws31.js"></script>
<title>室内SLAM建图和导航客户端 </title>
</head>

<body>
<article>


<table>
<tr>
<td style="width:1000px"><canvas id="map_canvas" @mousewheel="MouseWheel" width="1000" height="1000" style="border:1px solid #000000;"></canvas></td>
<td style="width:200px">
	<input type="checkbox" id="odom" onchange="changeodom()" checked="checked" >显示轨迹
	<br>
	<input type="checkbox" id="robot" onchange="changerobot()" checked="checked" >显示机器人
	<br>
	<input type="checkbox" id="scan" onchange="changescan()" checked="checked" >显示雷达帧
	<br>
	<input type="checkbox" id="path" onchange="changepath()" checked="checked" >显示路径
	<br>
	<input type="checkbox" id="charger" onchange="changecharger()" checked="checked" >显示charger
	<br>
	<input type="checkbox" id="A" onchange="changeA()"  >显示A
	<br>
	<input type="checkbox" id="B" onchange="changeB()"  >显示B
	<br>
	<input type=button id=getmap value="获取地图" ><br>
	<input type=button id=goal value="设置目标点" ><br>
	<input type=button id=route value="路径规划A*" ><br>
	<input type=button id=navigation value="导航到达" ><br>
	<input type=button id=direct_fwd value="直线到达"><br>
	<input type=button id=flate_fwd value="平滑到达"><br>
	<input type=button id=direct_back value="直线后退"> 
	<br>
	<input type=button id=rotate value="旋转" ><br>

	<input type=button id=gocharger value="去充电"><br>
	<input type=button id=goa value="去A点"><br>
	<input type=button id=gob value="去B点"><br>
	<input type=button id=estop value="停止!"><br><br>
	<div style="width:100px" id=connect_status>[连接状态]</div><br>
	<div id=bat_status>电池</div><br>
	<div id=status>...</div><br>
</td>
</tr>
<div style="width:32%;height:600px;border:solid black 1px;font-size:12px;overflow:auto;float:right">
<canvas id="output" style="width:565px;height:360px;
border:solid blue 1px;font-size:12px; position:relative;left:20px;top:20px;"></canvas>
</div>
</table>

 
<input type="file" name="fileName" id="fileName" onchange="fileSelected(this.value);" />离线保存的路径激光等信息
	<br>

<input type='text' id='devid' value="192.168.3.19" />
<button id="btnconnect" onclick="connectserver()">连接机器人</button>
<br>
<input type=button id=mode2 value="自主建图"> 机器人随机运动并使用神经网络避障.
<br>
<input type=button id=mode1 value="手动建图"> 手动控制运动
<br>
<input type=button id=mode5 value="抱离地面自由建图"> 不使用里程计暂不支持
<br>

<br>
<small>
<input type=button id=mode3 value="重定位"> 使用匹配算法完成机器人在地图中的定位
<br>
</small>
<input type=button id=setcharger value="设置充电桩位置"> 将机器人放到充电站然后再单击
<br>
<input type=button id=setA value="设置目标点A位置"> 鼠标先单击位置然后再单击按钮
<br>
<input type=button id=setB value="设置目标点B位置"> 鼠标先单击位置然后再单击按钮
<br>
<input type=button id=restart value="重启机器人"> 软件重启<br>
<input type=button id=raspi_reboot value="重启硬件"> <i>reboot</i> 硬件<br>
<input type=button id=raspi_shdn value="关机"> <i>shutdown -h now</i> 先指令关机再切断电源，or文件系统易损坏<br>
<br>


<br>
<table border="1">
<tr><td><center><big><b>Manual control</b></big></center></td></tr>
<tr><td><center><small>For resolving problems, FWD/BACK 10 cm per click, LEFT/RIGHT 10 deg per click.</small></center></td></tr>
<tr><td><center>
<table border="0">
<tr><td></td><td><input type=button id=manu_fwd value="FWD"></td><td></td></tr>
<tr><td><input type=button id=manu_left value="LEFT"></td><td></td><td><input type=button id=manu_right value="RIGHT"></td></tr>
<tr><td></td><td><input type=button id=manu_back value="BACK"></td><td></td></tr>
</table></center>
</td></tr>
</table>

</article>

<script nonce="lwscaro">

/*
	PULUROBOT RN1-SERVER  Web server and UI prototype

	(c) 2017-2018 Pulu Robotics and other contributors
	Maintainer: Antti Alhonen <antti.alhonen@iki.fi>

	This program is free software; you can redistribute it and/or modify
	it under the terms of the GNU General Public License version 2, as 
	published by the Free Software Foundation.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.

	GNU General Public License version 2 is supplied in file LICENSING.



	NOTE: This program is to be replaced with a proper implementation.
	Works as a "living use case document", or "proof of concept", or
	"minimum viable product", whichever you want to call it.

*/

document.getElementById('getmap').onclick = getmap;
document.getElementById('setcharger').onclick = setcharger;
document.getElementById('setA').onclick = mode1;
document.getElementById('setB').onclick = mode2;
document.getElementById('mode3').onclick = mode3;

 

document.getElementById('gocharger').onclick = godest1;
document.getElementById('goa').onclick = godest2;
document.getElementById('gob').onclick = godest3;
document.getElementById('estop').onclick = stop_move;

document.getElementById('manu_fwd').onclick = manu_fwd;
document.getElementById('manu_back').onclick = manu_back;
document.getElementById('manu_left').onclick = manu_left;
document.getElementById('manu_right').onclick = manu_right;
document.getElementById('goal').onclick = do_goal;
document.getElementById('route').onclick = do_route;
document.getElementById('direct_fwd').onclick = do_direct_fwd;
document.getElementById('flate_fwd').onclick = do_direct_fwd;
document.getElementById('direct_back').onclick = do_direct_back;
document.getElementById('rotate').onclick = do_rotate;
document.getElementById('navigation').onclick = do_navigation;

document.getElementById('restart').onclick = rn1host_restart;
document.getElementById('raspi_reboot').onclick = rn1host_reboot_raspi;
document.getElementById('raspi_shdn').onclick = rn1host_shdn_raspi;

/*
 * We display untrusted stuff in html context... reject anything
 * that has HTML stuff in it
 */

function san(s)
{
	if (s.search("<") != -1)
		return "invalid string";
	
	return s;
}



var canv = document.getElementById("map_canvas");
var ct = canv.getContext("2d");
var canv_w=canv.width;
var canv_h=canv.height;
console.log(canv_w+";"+canv_h);//1000*800
var view_start_x =  0;//-3000;
var view_start_y =  0;//-3000;
var mm_per_pixel = 1.0;//一个小像素10mm

var drag_start_x = 0.0;
var drag_start_y = 0.0;

var cur_angle = 0;
var cur_x = 100;
var cur_y = 100;
//当前航点
var cur_wpt_x = 100;
var cur_wpt_y = 100;

var charger_x = 500;
var charger_y = 500;

var A_x = 200;
var A_y = 200;
var B_x = 700;
var B_y = 700;



	// 获取checkbox元素
var check_robot=true,check_odom =true,check_scan=true,check_path=true,
    check_charger = true,check_A = false,check_B = false,check_wpt =true;
   	

function changeodom()
{
	check_odom = ($('#odom').is(":checked"));
	update_view();
	draw_world();
}
function changerobot()
{
	check_robot = ($('#robot').is(":checked"));
	update_view();
	draw_world();
}
function changescan()
{
	check_scan = ($('#scan').is(":checked"));
	update_view();
	draw_world();
}
function changepath()
{
	check_path = ($('#path').is(":checked"));
	update_view();
	draw_world();
}
function changecharger()
{
	check_charger = ($('#charger').is(":checked"));
	update_view();
	draw_world();
}
function changeA()
{
	check_A = ($('#A').is(":checked"));
	update_view();
	draw_world();
}
function changeB()
{
	check_B = ($('#B').is(":checked"));
	update_view();
	draw_world();
}
function update_view()
{
	//var view_end_x = view_start_x + canv_w*mm_per_pixel;
	//var view_end_y = view_start_y + canv_h*mm_per_pixel;

	//var buffer = new ArrayBuffer(17);

	//new DataView(buffer).setUint8(0, 1);
	//new DataView(buffer).setInt32(1, view_start_x, false);
	//new DataView(buffer).setInt32(5, view_start_y, false);
	//new DataView(buffer).setInt32(9, view_end_x, false);
	//new DataView(buffer).setInt32(13, view_end_y, false);


}

function scroll_view(x, y)
{
//	view_start_x -= x*mm_per_pixel;
//	view_start_y -= y*mm_per_pixel;

	update_view();
	draw_world();
}

var click_active = 1;
var click_x_mm = 0;
var click_y_mm = 0;

function activate_click()
{
	click_active = 1;
	document.getElementById("route").style.visibility = "visible";
	document.getElementById("direct_fwd").style.visibility = "visible";
	document.getElementById("direct_back").style.visibility = "visible";
	document.getElementById("rotate").style.visibility = "visible";
	draw_world();
}

function deactivate_click()
{
	click_active = 0;
	document.getElementById("route").style.visibility = "hidden";
	document.getElementById("direct_fwd").style.visibility = "hidden";
	document.getElementById("direct_back").style.visibility = "hidden";
	document.getElementById("rotate").style.visibility = "hidden";
	draw_world();
}

function handle_click(xpix, ypix)
{
	click_x_mm = xpix * mm_per_pixel + view_start_x;
	click_y_mm = ypix * mm_per_pixel + view_start_y;
	activate_click();
}

function do_route_old()
{
	var buffer = new ArrayBuffer(10);

	new DataView(buffer).setUint8(0, 2);
	new DataView(buffer).setInt32(1, click_x_mm, false);
	new DataView(buffer).setInt32(5, click_y_mm, false);
	new DataView(buffer).setUint8(9, 0);

}
function do_route(){

		 console.log("into send message");
		var jsoninf={ "control":"1" ,"x":"0.0" , "y":"0.0" };
		sendtopic = '/map/goal';
			//可以如下修改firstName属性的值
		 jsoninf["x"] = click_x_mm.toFixed(1) +'';
		 jsoninf["y"] = click_y_mm.toFixed(1) +'';
		ss = JSON.stringify(jsoninf);
		console.log(jsoninf);
		if(ss){
		   // s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";
			message = new Paho.MQTT.Message(ss);
			message.destinationName = sendtopic;
			client.send(message);
		}
	}
function do_goal(){

	 console.log("into send message");
	var jsoninf={ "control":"0" ,"x":"0.0" , "y":"0.0" };
	sendtopic = '/map/goal';
		//可以如下修改firstName属性的值
	 jsoninf["x"] = click_x_mm.toFixed(1) +'';
	 jsoninf["y"] = click_y_mm.toFixed(1) +'';
	ss = JSON.stringify(jsoninf);
	console.log(jsoninf);
	if(ss){
	   // s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";
		message = new Paho.MQTT.Message(ss);
		message.destinationName = sendtopic;
		client.send(message);
	}
}
function do_direct_fwd()  {do_dest(0);}
function do_flate_fwd()  {do_dest(0);}
function do_direct_back() {do_dest(1);}
function do_rotate()      {do_dest(8);}
function godest1() { do_dest(21); }
function godest2() { do_dest(22); }
function godest3() { do_dest(23); }
function mode3()   { do_dest(33); }



//navigation :0停止 1导航。
//2：获取地图
function stop_move() { 
		console.log("into send message");
		var jsoninf={ "value":"0"};
		sendtopic = '/navigation/value';
			//可以如下修改firstName属性的值
		 jsoninf["value"] = 0 +'';
		ss = JSON.stringify(jsoninf);
		console.log(jsoninf);
		if(ss){
			message = new Paho.MQTT.Message(ss);
			message.destinationName = sendtopic;
			client.send(message);
		}
 }
function getmap()
{
	console.log("into send message");
	var jsoninf={ "value":"2"};
	sendtopic = '/navigation/value';
		//可以如下修改firstName属性的值
	 jsoninf["value"] = 2 +'';
	ss = JSON.stringify(jsoninf);
	console.log(jsoninf);
	if(ss){
		message = new Paho.MQTT.Message(ss);
		message.destinationName = sendtopic;
		client.send(message);
	}
}
function do_navigation(){

	 console.log("into send message");
	var jsoninf={ "value":"1"};
	sendtopic = '/navigation/value';
		//可以如下修改firstName属性的值
	 jsoninf["value"] = 1 +'';
	ss = JSON.stringify(jsoninf);
	console.log(jsoninf);
	if(ss){
		message = new Paho.MQTT.Message(ss);
		message.destinationName = sendtopic;
		client.send(message);
	}
}
function do_dest(m)
{
	var jsoninf={ "value":"1"};
	sendtopic = '/navigation/value';
		//可以如下修改firstName属性的值
	 jsoninf["value"] = m +'';
	ss = JSON.stringify(jsoninf);
	console.log(jsoninf);
	if(ss){
		message = new Paho.MQTT.Message(ss);
		message.destinationName = sendtopic;
		client.send(message);
	}
	
}
function rn1host_restart() {restart_msg(1);}
function rn1host_reboot_raspi() {restart_msg(135);}
function rn1host_shdn_raspi()   {restart_msg(136);}

function restart_msg(m)
{
	var buffer = new ArrayBuffer(2);
	new DataView(buffer).setUint8(0, 6);
	new DataView(buffer).setUint8(1, m);
	var view_blob = new Blob([buffer], {type: "application/octet-stream"});
	//socket_di.send(view_blob);
}


function setcharger() {
//1是路径规划
var jsoninf={ "control":"10" ,"x":"0.0" , "y":"0.0" };
		charger_x = click_x_mm.toFixed(1);
		charger_y = click_y_mm.toFixed(1);
		draw_world();
		sendtopic = '/map/goal';
			//可以如下修改firstName属性的值
		 jsoninf["x"] = click_x_mm.toFixed(1) +'';
		 jsoninf["y"] = click_y_mm.toFixed(1) +'';
		ss = JSON.stringify(jsoninf);
		console.log(jsoninf);
		if(ss){
		   // s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";
			message = new Paho.MQTT.Message(ss);
			message.destinationName = sendtopic;
			client.send(message);
		}
}
function setA() {
var jsoninf={ "control":"11" ,"x":"0.0" , "y":"0.0" };
		charger_x = click_x_mm.toFixed(1);
		charger_y = click_y_mm.toFixed(1);
		draw_world();
		sendtopic = '/map/goal';
			//可以如下修改firstName属性的值
		 jsoninf["x"] = click_x_mm.toFixed(1) +'';
		 jsoninf["y"] = click_y_mm.toFixed(1) +'';
		ss = JSON.stringify(jsoninf);
		console.log(jsoninf);
		if(ss){
		   // s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";
			message = new Paho.MQTT.Message(ss);
			message.destinationName = sendtopic;
			client.send(message);
		}
}
function manu_fwd() { manu(10); }
function manu_back() { manu(11); }
function manu_left() { manu(12); }
function manu_right() { manu(13); }



function manu(m)
{
	var buffer = new ArrayBuffer(2);
	new DataView(buffer).setUint8(0, 5);
	new DataView(buffer).setUint8(1, m);
	var view_blob = new Blob([buffer], {type: "application/octet-stream"});
	//socket_di.send(view_blob);
}

 function onMouseWheel(ev) {/*当鼠标滚轮事件发生时执行一些操作*/
        var ev = ev || window.event;
        var down = true; // 定义一个标志当滚轮向下滚时执行一些操作
        down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        if (down) {
            console.log('鼠标滚轮向下放大---------')
			do_zoom_out();
          
        } else {
            
            console.log("缩小系数: " );
			do_zoom_in();
        }
        if (ev.preventDefault) {/*FF 和 Chrome*/
            ev.preventDefault();// 阻止默认事件
        }
        return false;
    }
	
	addEvent(canv, 'mousewheel', onMouseWheel);
    addEvent(canv, 'DOMMouseScroll', onMouseWheel);
 
 
    function addEvent(obj, xEvent, fn) {
        if (obj.attachEvent) {
            obj.attachEvent('on' + xEvent, fn);
        } else {
            obj.addEventListener(xEvent, fn, false);
        }
    }
	
	
	
var isDragging=false;

$(function()
{


	function handleMouseDown(e)
	{
		var rect = canv.getBoundingClientRect();
		drag_start_x=parseInt(e.clientX-rect.left);
		view_x_at_drag_start = view_start_x;
		view_y_at_drag_start = view_start_y;
		drag_start_y=parseInt(e.clientY-rect.top);
		isDragging=true;
	}

	function handleMouseUp(e)
	{
		if(isDragging)
		{
			isDragging=false;

			var rect = canv.getBoundingClientRect();
			canMouseX=parseInt(e.clientX-rect.left);
			canMouseY=parseInt(e.clientY-rect.top);
			drag_x=canMouseX - drag_start_x;
			drag_y=canMouseY - drag_start_y;

			if(drag_x > -5 && drag_x < 5 && drag_y > -5 && drag_y < 5)
			{
				handle_click(canMouseX, canMouseY);
			}
			else
			{
				scroll_view(drag_x, drag_y);
			}
		}
	}

	function handleMouseOut(e)
	{
		handleMouseUp(e);
	}

	function handleMouseMove(e)
	{
		if(isDragging)//一直按着
		{
			var rect = canv.getBoundingClientRect();
			drag_x=parseInt(e.clientX-rect.left) - drag_start_x;
			drag_y=parseInt(e.clientY-rect.top) - drag_start_y;

			view_start_x = view_x_at_drag_start - drag_x*mm_per_pixel;
			view_start_y = view_y_at_drag_start - drag_y*mm_per_pixel;

			draw_world();

		}
	}

	$("#map_canvas").mousedown(function(e){handleMouseDown(e);});
	$("#map_canvas").mousemove(function(e){handleMouseMove(e);});
	$("#map_canvas").mouseup(function(e){handleMouseUp(e);});
	$("#map_canvas").mouseout(function(e){handleMouseOut(e);});
});

 
function do_zoom_out()
{
	mm_per_pixel *= 1.2;
	ct.clearRect(0, 0, canv_w, canv_h);
	draw_world();
	update_view();
}

function do_zoom_in()
{
	mm_per_pixel *= 0.7;
	ct.clearRect(0, 0, canv_w, canv_h);
	draw_world();
	update_view();
}

var socket_di;

var world = new Map();

function draw_robot(ang, x, y)
{

}

//
//    0             1
//                  
//                  2
//           M  O     3
//                  4
//               
//    6             5
//

var route_len = 0;
var route_start = []; 
var route = [];
var points =[[0,0]];
var last_lidar_len = 0;
var last_lidar;
var map;
var map_len;
var free_map;
var free_map_len;
var traj;
var traj_len;
var last_robot_x=0;
var last_robot_y=0;

var robot_shape = [
	[-10,-5],
	[ 3,-5],
	[ 3,-2],
	[ 5,   0],
	[ 3, 2],
	[ 3, 5],
	[-10, 5]
];
var charger_shape = [
	[0, -8],
	[ 6,-8],
	[ 6,8],
	[ 0,8],
	[ 0,8],
	[ -8, 16],
	[ -8, -8]
	
];
var A_shape = [
	[-15,-0],
	[ 3,-10],
	[ 3,-4],
	[ 3, 10],
	[ 3, 4],
	[ 3, 10],
	[-15, 0]
	
];
var B_shape = [
	[-10,-10],
	[ 2,-10],
	[ 2,-4],
	[ -5,   0],
	[ 3, 4],
	[ 3, 10],
	[-10, 10]
	
];
var origin = {
	x:cur_x,
	y:cur_y
}
function set_robot_size(xs, ys, origin_xoffs, origin_yoffs)
{
	// x coords
	robot_shape[0][0] = robot_shape[6][0] = -1*(xs/2+origin_xoffs);
	robot_shape[1][0] = robot_shape[2][0] = robot_shape[4][0] = robot_shape[5][0] = xs/2-origin_xoffs;
	robot_shape[3][0] = robot_shape[2][0] + 100;

	// y coords
	robot_shape[0][1] = robot_shape[1][1] = -1*(ys/2+origin_yoffs);
	robot_shape[5][1] = robot_shape[6][1] = ys/2-origin_yoffs;
	robot_shape[2][1] = -1*origin_yoffs - 50;
	robot_shape[3][1] = -1*origin_yoffs;
	robot_shape[4][1] = -1*origin_yoffs + 50;
}

function draw_world()
{
	ct.clearRect(0, 0, canv_w, canv_h);
	//ct.fillStyle = "gray";
	//ct.fillRect(0, 0, canv_w, canv_h);
	for(var [key,img] of world)
	{
		var img_x = (key[0] - view_start_x) / mm_per_pixel;
		var img_y = (key[1] - view_start_y) / mm_per_pixel;

		//console.log("x=" + key[0] + " y=" + key[1] + " --> " + img_x + "," + img_y + " is " + img);
		// let drawImage handle out-of-bounds coordinates, just try to draw everything
		//ct.drawImage(img, img_x, img_y, (256*40)/mm_per_pixel, (256*40)/mm_per_pixel);
		ct.drawImage(img,img_x,img_y, (1000)/mm_per_pixel, (1000)/mm_per_pixel);
	}
	for(i = 0; i < free_map_len; i++)
	{
		ct.fillStyle = "rgb(122,250,205)";
		ct.fillRect((free_map?.[i]?.[0]-view_start_x)/ mm_per_pixel -1, (free_map?.[i]?.[1]-view_start_y)/ mm_per_pixel -1, 5, 5);
	}
     if(check_robot){
			// Draw the robot
			var robot_x_pix = (cur_x - view_start_x) / mm_per_pixel;
			var robot_y_pix = (cur_y - view_start_y) / mm_per_pixel;
			ct.save();
			ct.translate(robot_x_pix, robot_y_pix);
			ct.rotate(cur_angle);
			ct.beginPath();
			ct.moveTo(robot_shape[0][0]/mm_per_pixel, robot_shape[0][1]/mm_per_pixel);
			for(var i=0; i<7; i++)
			{
				ct.lineTo(robot_shape[i][0]/mm_per_pixel, robot_shape[i][1]/mm_per_pixel);
			}
			ct.closePath();
			ct.fillStyle = "#C07040A0";
			ct.fill();
			ct.restore();
		}
		if(check_charger){
			// Draw the charger
				var charger_x_pix = (charger_x - view_start_x) / mm_per_pixel;
				var charger_y_pix = (charger_y - view_start_y) / mm_per_pixel;
				ct.save();
				ct.translate(charger_x_pix, charger_y_pix);
				ct.rotate(-3.14/2);
				ct.beginPath();
				ct.moveTo(charger_shape[0][0]/mm_per_pixel, charger_shape[0][1]/mm_per_pixel);
				for(var i=0; i<7; i++)
				{
					ct.lineTo(charger_shape[i][0]/mm_per_pixel, charger_shape[i][1]/mm_per_pixel);
				}
				ct.closePath();
				ct.fillStyle = "rgb(97,207,54)";
				ct.fill();
				ct.restore();
	}
	if(check_A)
	{
				var _x_pix = (A_x - view_start_x) / mm_per_pixel;
				var _y_pix = (A_y - view_start_y) / mm_per_pixel;
				ct.save();
				ct.translate(_x_pix, _y_pix);
				ct.rotate(3.1415/2);
				ct.beginPath();
				ct.moveTo(A_shape[0][0]/mm_per_pixel, A_shape[0][1]/mm_per_pixel);
				for(var i=0; i<7; i++)
				{
					ct.lineTo(A_shape[i][0]/mm_per_pixel, A_shape[i][1]/mm_per_pixel);
				}
				ct.closePath();
				ct.fillStyle = "rgb(97,207,54)";
				ct.fill();
				ct.restore();
		}		
			if(check_B)
			{
				var _x_pix = (B_x - view_start_x) / mm_per_pixel;
				var _y_pix = (B_y - view_start_y) / mm_per_pixel;
				ct.save();
				ct.translate(_x_pix, _y_pix);
				ct.rotate(0);
				ct.beginPath();
				ct.moveTo(B_shape[0][0]/mm_per_pixel, B_shape[0][1]/mm_per_pixel);
				for(var i=0; i<7; i++)
				{
					ct.lineTo(B_shape[i][0]/mm_per_pixel, B_shape[i][1]/mm_per_pixel);
				}
				ct.closePath();
				ct.fillStyle = "rgb(97,207,54)";
				ct.fill();
				ct.restore();
			}
	if(route_len > 0  && check_path==true )
	{

		ct.beginPath();
		ct.moveTo((route_start[0] - view_start_x) / mm_per_pixel, (route_start[1] - view_start_y) / mm_per_pixel);
		for(i = 0; i < route_len; i++)
		{
			ct.lineWidth = 3;
			if(route[i][2] > 0)
				ct.strokeStyle = "#C00000B0";
			else
				ct.strokeStyle = "#00C030B0";

			ct.lineTo((route[i][0] - view_start_x) / mm_per_pixel, (route[i][1] - view_start_y) / mm_per_pixel);
			ct.stroke();
			if(i < route_len-1)
			{
				ct.beginPath();
				ct.moveTo((route[i][0] - view_start_x) / mm_per_pixel, (route[i][1] - view_start_y) / mm_per_pixel);
			}
		}
	}
	if(check_scan)
	{

		for(i = 0; i < last_lidar_len; i++)
		{
				ct.fillStyle = "red";
			ct.fillRect((last_lidar[i][0]-view_start_x)/ mm_per_pixel -1, (last_lidar[i][1]-view_start_y)/ mm_per_pixel -1, 2, 2);
		}
	}
	for(i = 0; i < map_len; i++)
	{
		ct.fillStyle = "black";
		ct.fillRect((map?.[i]?.[0]-view_start_x)/ mm_per_pixel -1, (map?.[i]?.[1]-view_start_y)/ mm_per_pixel -1, 2, 2);
	}
	if(check_odom){
		for(i = 0; i < traj_len; i++)
		{
			ct.fillStyle = "rgb(255,0,0)";
			ct.fillRect((traj?.[i]?.[0]-view_start_x)/ mm_per_pixel -1, (traj?.[i]?.[1]-view_start_y)/ mm_per_pixel -1, 5, 5);
		}
	}
	if(click_active)
	{

		ct.fillStyle = "#FF7090C0";
		ct.fillRect((click_x_mm-view_start_x)/mm_per_pixel-5,(click_y_mm-view_start_y)/mm_per_pixel-5, 10, 10);

		ct.beginPath();
		ct.moveTo((cur_x - view_start_x) / mm_per_pixel, (cur_y - view_start_y) / mm_per_pixel);
		ct.lineWidth = 2;
		ct.strokeStyle = "#FF709090";
		ct.lineTo((click_x_mm - view_start_x) / mm_per_pixel, (click_y_mm - view_start_y) / mm_per_pixel);
		ct.stroke();
	}
	if(check_wpt)//显示当前航点
	{
		ct.fillStyle = "blue";
		ct.fillRect((cur_wpt_x-view_start_x)/mm_per_pixel-5,(cur_wpt_y-view_start_y)/mm_per_pixel-5, 10, 10);

	}
	//根据点连线
    //防止重绘
   ct.beginPath();
   //ct.moveTo((last_robot_x - view_start_x) / mm_per_pixel, (last_robot_y - view_start_y) / mm_per_pixel);
   ct.lineWidth = 2;
   ct.strokeStyle = "green";
   points.forEach(function (arr) {
      ct.lineTo(( arr[0]- view_start_x) / mm_per_pixel ,( arr[1] - view_start_y) / mm_per_pixel  );
    });
	ct.stroke();
}
//last_lidar_len = 360;
var dis=[493.5, 496.25, 500.0, 504.0, 508.25, 511.5, 517.0, 521.5, 525.75, 532.75, 538.75, 544.25, 551.25, 558.5, 565.25, 573.25, 581.25, 591.0, 599.75, 611.75, 622.5, 634.25, 647.5, 660.75, 674.75, 690.25, 709.0, 725.25, 746.5, 765.75, 790.0, 812.25, 838.25, 866.5, 896.5, 925.5, 963.75, 1001.25, 1048.0, 1094.75, 1145.25, 1205.25, 1268.0, 1341.25, 1420.5, 1522.5, 1624.0, 1744.25, 1880.25, 2046.0, 2126.0, 2807.75, 2841.75, 2987.75, 2987.5, 2981.0, 2976.0, 2973.0, 2971.75, 2970.0, 2969.75, 2969.75, 2971.75, 2978.5, 2980.75, 2981.0, 2993.5, 3010.5, 3018.5, 2733.25, 2493.5, 3054.75, 3076.0, 3096.25, 3109.0, 3141.75, 3161.0, 3195.75, 3220.5, 3267.25, 3036.25, 3172.5, 3164.25, 2457.5, 2495.75, 2537.0, 2574.25, 2626.0, 3734.5, 2692.5, 2725.25, 2780.25, 2860.75, 2894.0, 4177.25, 4284.25, 4409.25, 4680.75, 4728.75, 4619.5, 4269.5, 4206.5, 4151.0, 4110.75, 4061.75, 3988.25, 3995.0, 3918.75, 3898.5, 3888.5, 3846.75, 3803.75, 3771.75, 3931.75, 3656.75, 3639.0, 3622.75, 3575.5, 3556.25, 3533.5, 3537.75, 3773.25, 3767.0, 3500.25, 3485.0, 3468.0, 3464.5, 3460.5, 3463.25, 3459.25, 3468.5, 3726.5, 3737.75, 3767.75, 3767.0, 3788.75, 6020.0, 6059.0, 6011.75, 5841.25, 870.5, 870.0, 432.75, 421.25, 416.25, 413.5, 413.5, 414.25, 418.0, 428.5, 441.5, 540.75, 534.75, 530.0, 526.5, 523.25, 524.0, 527.0, 531.25, 536.25, 541.0, 552.0, 561.25, 586.0, 597.5, 606.75, 624.25, 672.25, 2380.25, 2350.5, 2334.75, 2313.25, 2294.25, 2281.0, 2256.5, 384.5, 380.5, 374.75, 375.25, 374.5, 374.25, 375.0, 376.0, 381.25, 2216.0, 2356.25, 2367.25, 2367.5, 2368.5, 2367.75, 1116.75, 1068.75, 1074.0, 1076.5, 1081.25, 1239.0, 1174.25, 1091.75, 873.75, 956.5, 964.5, 976.5, 992.75, 600.5, 591.0, 581.25, 571.75, 291.25, 556.0, 549.0, 178.75, 364.0, 527.0, 523.0, 426.5, 425.75, 415.5, 401.0, 346.25, 333.75, 319.75, 314.25, 305.25, 297.5, 289.5, 286.0, 293.75, 303.75, 314.5, 327.5, 338.5, 493.25, 483.75, 485.25, 487.25, 490.25, 493.25];
var  angal=[354.578125, 355.734375, 357.125, 358.328125, 359.5625, 0.890625, 1.875, 3.21875, 4.53125, 5.6875, 6.984375, 8.296875, 9.5625, 10.609375, 11.828125, 13.015625, 14.375, 15.53125, 16.75, 18.09375, 19.234375, 20.5, 21.75, 22.859375, 24.046875, 25.265625, 26.46875, 27.6875, 28.984375, 30.171875, 31.34375, 32.59375, 33.78125, 35.015625, 36.3125, 37.5625, 38.75, 39.984375, 41.125, 42.328125, 43.578125, 44.75, 45.9375, 47.15625, 48.40625, 49.5625, 50.8125, 52.015625, 53.21875, 54.40625, 55.65625, 56.765625, 58.015625, 59.375, 60.625, 61.921875, 63.1875, 64.46875, 65.734375, 67.015625, 68.265625, 69.546875, 70.828125, 72.109375, 73.34375, 74.65625, 75.90625, 77.203125, 78.4375, 79.796875, 81.109375, 82.28125, 83.484375, 84.78125, 86.0625, 87.296875, 88.578125, 89.828125, 91.125, 92.375, 93.6875, 96.203125, 100.03125, 101.421875, 102.703125, 103.9375, 105.203125, 106.453125, 107.609375, 109.0625, 110.3125, 111.5625, 112.828125, 114.09375, 115.234375, 116.484375, 117.765625, 119.015625, 120.296875, 121.5625, 122.859375, 124.140625, 125.421875, 126.703125, 127.984375, 129.265625, 130.453125, 131.734375, 133.0, 134.265625, 135.546875, 136.8125, 138.09375, 139.359375, 140.640625, 141.9375, 143.1875, 144.46875, 145.71875, 147.0, 148.265625, 149.5, 150.78125, 152.078125, 153.359375, 154.671875, 155.953125, 157.21875, 158.5, 159.78125, 161.03125, 162.28125, 163.546875, 164.8125, 166.109375, 167.359375, 174.859375, 176.125, 177.390625, 179.875, 182.5, 183.875, 186.96875, 188.078125, 189.640625, 190.828125, 192.0, 193.5625, 194.5, 195.671875, 196.734375, 197.59375, 198.90625, 200.203125, 201.5, 202.796875, 203.9375, 205.125, 206.5625, 207.734375, 208.953125, 210.109375, 211.484375, 212.609375, 213.734375, 215.109375, 216.28125, 217.375, 219.59375, 220.875, 222.171875, 223.4375, 224.671875, 225.96875, 227.34375, 231.78125, 233.125, 234.296875, 235.9375, 237.234375, 238.25, 239.609375, 240.8125, 241.96875, 245.21875, 246.46875, 247.734375, 249.0, 250.296875, 251.546875, 253.5, 254.875, 256.078125, 257.375, 258.6875, 259.765625, 261.09375, 262.5, 266.671875, 269.0625, 270.3125, 271.484375, 272.734375, 300.390625, 301.625, 302.9375, 304.3125, 307.90625, 306.84375, 308.125, 314.609375, 312.3125, 312.21875, 313.359375, 317.78125, 319.140625, 320.40625, 322.046875, 324.046875, 325.0, 326.890625, 328.484375, 329.890625, 330.71875, 332.484375, 334.171875, 335.09375, 336.46875, 336.921875, 337.859375, 339.15625, 345.390625, 349.171875, 350.484375, 351.875, 352.921875, 354.125];

var lidar_robot_angle = 0;
var lidar_robot_x = 0;
var lidar_robot_y = 0;
/*
last_lidar = new Array(last_lidar_len);

for(i = 0; i < last_lidar_len; i++)
{
	var x = dis[i]*Math.cos(angal[i]*3.14/180);
	var y =  dis[i]*Math.sin(angal[i]*3.14/180);
	last_lidar[i] = new Array(2);
	last_lidar[i][0] = x + lidar_robot_x;
	last_lidar[i][1] = y + lidar_robot_y;
}
*/
/*
try {
	socket_di.onopen = function() {
		
	} 

	socket_di.onmessage =function got_packet(msg)
	{
		if(msg.data instanceof Blob)
		{
			var fileReader = new FileReader();
			fileReader.onload = function()
			{ 
				var arrayBuffer = this.result;
				var view = new Uint8Array(arrayBuffer.slice(0,3));

				var pay_size = view[1]*256+view[2];

				switch(view[0])
				{
					case 200:
					{
						var image = new Image();
						image.onload = function()
						{
							draw_world();
						}
						image.src = URL.createObjectURL(msg.data.slice(10, msg.data.size, "image/png"));
						var img_x_mm = (new DataView(arrayBuffer).getInt32(1, false));
						var img_y_mm = (new DataView(arrayBuffer).getInt32(5, false));
						var status = (new DataView(arrayBuffer).getUint8(9));
						image.width = 256;
						image.height = 256;
						world.set([img_x_mm, img_y_mm], image);
						break;

					}
					case 130:
					{ 
						cur_angle = (new DataView(arrayBuffer.slice(3,5)).getInt16(0, false)) / 65536 * 2 * Math.PI;
						cur_x = (new DataView(arrayBuffer.slice(5,9)).getInt32(0, false));
						cur_y = (new DataView(arrayBuffer.slice(9,13)).getInt32(0, false));
						draw_world();
					}
					break;

					case 134:
					{
						var flags = (new DataView(arrayBuffer).getUint8(3));

						var str = "";
						if(flags & 1)
							str += " CHARGING ";
						if(flags & 2)
							str += " FULL ";

						var volts = (new DataView(arrayBuffer).getUint16(4, false));
						var percentage = (new DataView(arrayBuffer).getUint8(6));
						var cha_volts = (new DataView(arrayBuffer).getUint16(7, false));

						//document.getElementById("bat_status").textContent = volts/1000 + "V  " + percentage + "% " + str + " charger_in=" cha_volts/1000 + "V";
					}

					




					break;

					case 131:
					{
						if(isDragging) break;

						last_lidar_len = (pay_size-10)/2;

						var lidar_robot_angle = (new DataView(arrayBuffer.slice(3,5)).getInt16(0, false)) / 65536 * 360;
						var lidar_robot_x = (new DataView(arrayBuffer.slice(5,9)).getInt32(0, false));
						var lidar_robot_y = (new DataView(arrayBuffer.slice(9,13)).getInt32(0, false));

						last_lidar = new Array(last_lidar_len);

						for(i = 0; i < last_lidar_len; i++)
						{
							var x = (new DataView(arrayBuffer.slice(13+2*i+0,13+2*i+1)).getInt8(0, false));
							var y = (new DataView(arrayBuffer.slice(13+2*i+1,13+2*i+2)).getInt8(0, false));
							last_lidar[i] = new Array(2);
							last_lidar[i][0] = x*160 + lidar_robot_x;
							last_lidar[i][1] = y*160 + lidar_robot_y;
						}


					}
					break;

					default:
					{
					}

				}

			};
			fileReader.readAsArrayBuffer(msg.data);

//				var reader = new FileReader();
//				reader.addEventListener("loadend", function() {});
//				reader.readAsArrayBuffer(msg.data);
			
		}
	} 

	
} catch(exception) {
	alert('<p>Error' + exception);  
}







*/
function redraw()
{
	update_view();
	draw_world();
}
 
//cur_angle = 100;// / 65536 * 2 * Math.PI;
//cur_x = 100;
//cur_y = 100;



		var urlPath = window.document.location.href;
		var docPath = window.document.location.pathname; //文件在服务器相对地址 /ISV/demo.aspx
		var index = urlPath.indexOf(docPath);
		var serverPath = urlPath.substring(0, index);
		var serverip = serverPath.substring(7);
		console.log("termianip:"+serverip);
		var hostip = "192.168.20.65", port = 8083,client,
		clientId = 'client-mao21804';
		var vid_canvas = document.getElementById('output');
		var context = vid_canvas.getContext("2d");
		
		 MQTTconnect();
		 var test_cnt =0;
		 
		 function connectserver() {
		
			 serverip =document.getElementById("devid").value;
			 MQTTconnect();
			}
		function MQTTconnect(){
			//devid =document.getElementById("devid").value;
			topic =  '/sensors/odomcombine';
			console.log(topic);
			
			
			client = new Paho.MQTT.Client(serverip, Number(port), clientId);
			client.onConnectionLost = onConnectionLost;//注册连接断开处理事件
			client.onMessageArrived = onMessageArrived;//注册消息接收处理事件
			client.connect({onSuccess:onConnect});//连接服务器并注册连接成功处理事件
			};

		function onConnect() {
		  // Once a connection has been made, make a subscription and send a message.
		  console.log("onConnect:"+topic);
		  document.getElementById("connect_status").style.backgroundColor = "#40ff40";
		  document.getElementById("connect_status").textContent = "[连接成功]";
		  client.subscribe(topic);
		  client.subscribe("/camera/collect");
		  client.subscribe("/sensors/lidar_node_pub");
		 // client.subscribe("/sensors/bno085");
		  client.subscribe("/sensors/map");
		  client.subscribe("/path/planning");
		};
		function onConnectionLost(responseObject) {
		  
		  if (responseObject.errorCode !== 0)
			console.log("onConnectionLost:"+responseObject.errorMessage);
			console.log("连接已断开");
			document.getElementById("connect_status").style.backgroundColor = "#ff4040";
			document.getElementById("connect_status").textContent = "[断开连接]";
		};
		function onMessageArrived(message) {
	
		//console.log("收到消息:"+message.payloadString);
		 console.log("主题："+message.destinationName);
		//console.log("长度："+strlen(message.payloadString));
		if(message.destinationName == "/sensors/odomcombine")
		{
		//  heading.update(headingI);//0~360 00
		   var temp1 = jQuery.parseJSON(message.payloadString);

			//console.log("解析出来的："+temp1.mx); 
		//	console.log("解析出来的：lati："+temp1.my);
			heading = temp1.pz;
		    /*heading = Math.atan2(temp1.my,temp1.mx)*180/3.1415;
			
			if(heading<0)heading=heading+360;
			if(heading<100)heading =heading*1.5;
			else if(heading<140)heading =heading*1.5;
			else if(heading<150)heading =heading*1.45;
			else if(heading<160)heading =heading*1.40;
			else if(heading<170)heading =heading*1.35;
			else if(heading<180)heading =heading*1.3;
			else if(heading<190)heading =heading*1.25;
			else if(heading<200)heading =heading*1.2;
			else if(heading<210)heading =heading*1.15;
			else if(heading<220)heading =heading*1.10;
			else if(heading<230)heading =heading*1.05;
			else if(heading<240)heading =heading*1.0;
			
			
			
			if(heading < -180)                   //#Note:numpy and OpenCV X and Y reversed
				heading = heading + 360 ;
			else if( heading > 180)
            heading = heading - 360 ;*/
			
			console.log("content："+message.payloadString);
			
			cur_angle =  heading + Math.PI;
			var   o_x = temp1.dx *Math.cos(heading);
			var   o_y = temp1.dx *Math.sin(heading);
			cur_x = cur_x + o_x *1000;
            cur_y = cur_y + o_y *1000;
			points.push([cur_x,cur_y]);
			console.log("解析出来的heading："+heading*180/3.14+":"+cur_x+":"+cur_y);
			draw_world();
			// throttle(deviceOrientationListener, 3, 3);
			//deviceOrientationListener();
			/*lonti = temp1.lonti ;
			lati = temp1.lati;
			gpsheading=temp1.gpsheading;
			gpsvelocity =temp1.gpsvelocity;
			IMUheading =temp1.heading;
			roll = temp1.roll;
			pitch =temp1.pitch;
			cpuload =temp1.cpuload;
			cputemp = temp1.cputemp;
			fusionheading = temp1.fusionheading;
			//wifisignal =temp1.wifisignal;
			//velspeed = speedI =temp1.velspeed/10;
			//angspeed = temp1.angspeed;
			
			$('#IMUheading').innerHTML(IMUheading);
			
			$('#cputem').innerHTML(cputemp);
			$('#cpuload').innerHTML(cpuload);
			$('#gpsvelocity').innerHTML(gpsvelocity);
			$('#angspeed').innerHTML(angspeed);
			$('#heading').innerHTML(fusionheading);
*/
		
		
		}else if(message.destinationName == "/camera/collect")
		{
			 
			
			//image.src = URL.createObjectURL(message.payloadString);//payloadString
			//image.src = URL.createObjectURL(message.payloadBytes);
			
			var image = new Image();
		
			let binaryData = [];
            binaryData.push(message.payloadBytes);
            image.src = window.URL.createObjectURL(new Blob(binaryData));
			
			image.onload = function () {
				//image.height
				
				//context.drawImage(image, 0, 0, image.width, image.height);
				context.drawImage(image, 0, 0,512/2, 256/2);
			}
			
			
			//context.drawImage(image,0,0, image.width, image.height);
			 //world.set([100, 100], image);
			 
		}else if(message.destinationName == "/sensors/lidar_node_pub")
		{
			
			last_lidar_len =360;
			last_lidar = new Array(last_lidar_len);
			for(i = 0,j=0; i < last_lidar_len; i++)
			{
				var distance_size = message.payloadBytes[j+4]+message.payloadBytes[j+5]*256;
				j = j+2;
				//var distance_size = (new DataView(binaryData[0]).getUint16(4+i, false));
				//var distance_size ;//=binaryData.readInt16([4+i]);
				var rad = cur_angle*3.14/180+3.14;
				var x = distance_size*0.05*Math.cos(i*3.14/180+rad);
				var y =  distance_size*0.05*Math.sin(i*3.14/180+rad);
				last_lidar[i] = new Array(2);
				last_lidar[i][0] = x + cur_x;
				last_lidar[i][1] = y + cur_y;
			}
			draw_world();
		}
		/*else	if(message.destinationName == "/sensors/bno085")
		{
		
		   var temp1 = jQuery.parseJSON(message.payloadString);

			heading = temp1.yaw;
			console.log("content："+message.payloadString);
			
			cur_angle =  heading * Math.PI/180 + Math.PI  ;
			draw_world();
		}*/
		else	if(message.destinationName == "/sensors/map")
		{
		
		console.log(message.payloadBytes[0]);
			if((message.payloadBytes[0])==123)//{}
			{
			var temp = jQuery.parseJSON(message.payloadString);
				var traj1 = temp.traj;
				var x= temp.x;
				var y=temp.y;
				var heading = temp.heading;
				cur_x =x;
				cur_y =y;
				cur_wpt_x =temp.wx;
				cur_wpt_y =temp.wy;
				cur_angle = heading*3.14/180;
			    console.log(temp);
				console.log("traj:"+traj1.length);
				traj_len = traj1.length;
				traj = new Array(traj_len);
				for(i = 0,j=0; i < traj_len; i++)
				{
					
					
					var x =  traj1[i][0];
					var y =  traj1[i][1];;
					traj[i] = new Array(2);
					traj[i][0] = x ;
					traj[i][1] = y ;
					
				}
				
				
			}
			else{
				var image = new Image();
			
				let binaryData = [];
				binaryData.push(message.payloadBytes);
				image.src = window.URL.createObjectURL(new Blob(binaryData));
				
				image.onload = function () {

					//draw_world();
				}
				world.set([0, 0], image);
			}
			
			draw_world();
		}
		
		else if(message.destinationName == "/path/planning")
		{
			let binaryData = [];
            binaryData.push(message.payloadBytes);
			len = binaryData[0].length;
			//console.log(binaryData);
			console.log(binaryData[0]);
			//console.log(len);
			//console.log(binaryData[0][0]);
			route_len = len/8;//得到的(x,y)有多少组
			console.log(route_len);
			route = new Array(route_len);
			for(i = 0,j=0; i < len-1; i=i+8)
			{
				var x = binaryData[0][i]+binaryData[0][1+i]*256;
				var y = binaryData[0][i+4]+binaryData[0][5+i]*256;
				console.log(x+";"+y);
				
				route[j] = new Array(2);
				//route[j][2] = 1;
				route[j][0] = y;
				route[j][1] = x;
				j ++;
				

			}
			draw_world();
		}
		 
	};
	  //计算字符串的长度
	function strlen(str){
		var len = 0;
		for (var i=0; i<str.length; i++) { 
		 var c = str.charCodeAt(i); 
		//单字节加1 
		 if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
		   len++; 
		 } 
		 else { 
		  len+=2; 
		 } 
		} 
		return len;
	}
	//选择离线文件 建图
	var latt_file=[];
	var lngtt_file=[];
	var timestamp_file=[];
	var rencode_file=[];
	var lencode_file=[];
	var px_file=[];
	var py_file=[];
	var pz_file=[];
	var lidar_file=[];
	var total_points_cnt =0;
	function fileSelected(filepath)
    {
     var file =  document.getElementById('fileName').files[0];
	getActionData(file);
    }
function getActionData (file) {
      const __this = this
      var reader = new FileReader()// 新建一个FileReader
	  if(file==undefined)
	     return ;
		reader.readAsText(file, 'UTF-8')// 读取文件
	   console.log(file);
		reader.onload = function (evt) { // 读取完文件之后会回来这里
        var fileString = evt.target.result ;// 读取文件内容
		let len = fileString.split('\n').length;
		var fileStringline = fileString.split('\n');
		console.log(len);
		  for(var i in fileStringline){
			// 数组对象中的每一条数据
			     //console.log(fileStringline[i]);
			var datalists = fileStringline[i].split(' ');
			// 数组对象中的每一条数据的info属性上的值
			if(datalists[0] =="")
				break ;
			 timestamp_file.push(datalists[0]);
			 rencode_file.push(datalists[2]);
			 lencode_file.push(datalists[3]);
			 px_file.push(datalists[4]);
			 py_file.push(datalists[5]);
			 pz_file.push(datalists[6]);
			cur_angle =  datalists[6];
			cur_x = datalists[4] *1000;
            cur_y = datalists[5]*1000;
			points.push([cur_x,cur_y]);
			 for(i = 0; i < 360; i++){
				lidar_file.push(datalists[i+26]);
			}
			//draw_world();
			//gps_time.push(jsonObj.data[i][3014]);
			 total_points_cnt ++;
		 }
		 last_lidar_len =360*len;
		 last_lidar = new Array(last_lidar_len);
		 console.log(lidar_file.length );
		 var t_deg =0;
		 for(i = 0; i < last_lidar_len; i++)
			{
			//相对角度加激光360角度
			var deg =pz_file[parseInt(i/360)]*180/3.1415 + t_deg ;
			 t_deg ++;
			 if(t_deg ==359)
			 t_deg =0;
			if(deg > 180)
				deg = 360-deg;
			else if (deg < -180)
				deg = deg+ 360;
			// console.log(deg);
			 var rad = deg*3.1415/180;
				var x = lidar_file[i]*Math.cos(rad);
				var y = lidar_file[i]*Math.sin(rad);
				//var result=points.flat(parseInt(i/360));
				console.log(x+ "  "+y);
				last_lidar[i] = new Array(2);
				last_lidar[i][0] = x + px_file[parseInt(i/360)]*1000;
				last_lidar[i][1] = y + py_file[parseInt(i/360)]*1000;
			} 
		//work_date = jsonObj.data[total_points_cnt-1][3014];
		//console.log(work_date);
      }
	  //setTimeout(dynamicLine, 1000);
	  draw_world();
	  return ;
    }
</script>

</body>
</html>
